<!doctype html>
<html style="height:100%;font-size:14px;">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="spreadjs culture" content="zh-cn" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷你图</title>
    <!-- 引入SpreadJS相关的CSS,默认会有一个CSS
    SpreadJS默认提供了7种CSS，可以选择一个适合当前项目的引入
-->
    <link rel="stylesheet" type="text/css" href="./css/gc.spread.sheets.excel2013white.15.1.0.css" />
    <!-- 核心资源，最小依赖资源，只要引入了该资源，组件运行时就能显示出来 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.all.15.1.0.min.js"></script>
    <!-- 中文资源文件，组件运行时默认会用英文资源，使用中文资源需要引入并设置 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.resources.zh.15.1.0.min.js"></script>
    <!-- 导入导出excel文件的相关资源 -->
    <!-- <script type="text/javascript" src="./js/gc.spread.excelio.15.1.0.min.js"></script> -->
    <!-- 形状相关资源-->
    <script type="text/javascript" src="./js/gc.spread.sheets.shapes.15.1.0.min.js"></script>
    <!-- 透视表相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.pivot.pivottables.15.1.0.min.js"></script>
    <!-- 迷你图的相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.charts.15.1.0.min.js"></script>
    <!-- 二维码相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.barcode.15.1.0.min.js"></script>
    <!-- 打印相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.print.15.1.0.min.js"></script>
    <!-- PDF相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.pdf.15.1.0.min.js"></script>
    <!-- 集算表相关资源 集算表是SpreadJS特有的功能 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.tablesheet.15.1.0.min.js"></script>
    <!-- 引入designer样式资源 -->
    <link rel="stylesheet" type="text/css" href="./css/gc.spread.sheets.designer.15.1.0.min.css" />
    <style>
        #ss {
            height: 98vh;
            float: left; 
            width: 80%;
            /* left: auto; */
        }
    </style>
    <script src="js/sparkline.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/sparkline.css">
</head>
<body>

<div class="sample-tutorial">
    <div id="ss" class="sample-spreadsheets"></div>
    
    <div class="options-container">
        <!--添加迷你图-->
        <div class="option-group">
        <label><b>Add SparkLine（添加迷你图）:</b></label>
        </div>
        <hr>
        <!--选择工作表中的数据区域-->
            <div class="option-group">
                <label>1. Select the data range in the sheet(选择工作表中的数据区域)</label>
            </div>
            <div class="option-group">
                <!--输入目标单元格（行、列索引）-->
                <label for="line_position">2. Enter destination cell (row,column index)(输入目标单元格（行、列索引）)</label>
                <!--id名称，用来在js中获取事件-->
            <input id="line_position" value="0,0" />
            </div>
            <!--更改迷你图的类型和方向-->
            <div class="option-group">
                <label for="line_position">3. Change the type and orientation(更改迷你图的类型和方向)</label>
        </div>
        <div class="option-group">
            <label for="line_type" style="width: auto;">Type:</label>
            <select id="line_type" class="position">
                <option value="0">line</option>
                <option value="1">column</option>
                <option value="2">winloss</option>
            </select>
        </div>
        <div class="option-group">
            <label for="line_orientation">Orientation:</label>
             <!--id名称，用来在js中获取事件-->
            <select id="line_orientation" class="position">
                <option value="0">Vertical</option>
                <option value="1">Horizontal</option>
            </select>
        </div>
            <!--单击“添加迷你图”按钮-->
            <div class="option-group">
                <label for="line_position">4. Click "Add Sparkline" button(单击“添加迷你图”按钮)</label>
            </div>
        <div class="option-group">
            <input type="button" value="Add Sparkline" id="btnAddSparkline">
        </div>
        <br>
        <div>
            <!--删除迷你图-->
            <label><b>Remove SparkLine(删除迷你图):</b></label>
            </div>
            <hr>
                <div class="option-group">
                    <label>1. Select Sparkline(选择要删除的迷你图)</label>
                </div>
                <div class="option-group">
                    <label for="line_position">2. Click "Clear Sparkline" butto(单击“清除迷你图”按钮)</label>
                </div>
            <div class="option-group">
            <input type="button" value="Clear Sparkline" id="btnClearSparkline">
        </div>
    </div>
</div>
</body>
</html>